@mixin toolbar-item($pos,$hoverPos){
  background-position: 0 $pos;
  &:hover{
    background-position: 0 $hoverPos;
  }
}
$toolbar-size:52px;
.toolbar-item ,.toolbar-layer{
  background-image: url('../img/toolbar.png');
  background-repeat: no-repeat;
}
.toolbar{
  position: fixed;
  left: 50%;
  bottom:5px;
  margin-left: -$toolbar-size / 2;
}
.toolbar-item {
  display: block;
  width: $toolbar-size;
  height: $toolbar-size;
  margin-top: 1px;
  position: relative;
  @include transition(background-position 0.5s);
  &:hover{
    .toolbar-layer{
      @include opacity(1);
      @include scale(1);
    }
  }
}
.toolbar-item-weixin{
  @include toolbar-item(-798px,-860px);
  .toolbar-layer{
    height: 212px;
    background-position: 0 0;
  }
}
.toolbar-item-feedback{
  @include toolbar-item(-426px,-488px);

}
.toolbar-item-app{
  @include toolbar-item(-550px,-612px);

  .toolbar-layer{
    height: 194px;
    background-position: 0 -222px;
  }
}
.toolbar-item-top{
  @include toolbar-item(-674px,-736px);
}

.toolbar-layer{
  position: absolute;
  right: $toolbar-size;
  bottom:0;
  width:172px;
  @include opacity(0.01);
  @include transform-origin(right bottom);
  @include scale(0.01);
  @include transition(all 0.8s);
}
